<template>
    <div class="moudle">
    <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '模块']" v-on:changeSolution="changeSolution" :componentType="componentType"></Breadcrumb>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="tabHeader">
          <el-button class="addPro" icon="el-icon-circle-plus" type="primary" @click="showAddModal">添加模块</el-button>
      </div>

      <el-table
        :data="tableData"
        max-height="600"
        line-height="50"
        border
        :header-cell-style='headerStyle'
        style="width: calc(100% - 40px); margin: 0 20px;">
        <!--
        <el-table-column
            prop="moduleId"
            label="模块ID"
            width="100"
            align="center">
        </el-table-column>
        -->
        <el-table-column
            prop="moduleCode"
            label="模块编码"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="moduleName"
            align="center"
            width="200"
            label="模块名称">
        </el-table-column>
        <el-table-column
            prop="solutionName"
            align="center"
            width="100"
            v:if={{componentType===2}}
            label="所属项目">
        </el-table-column>
        <el-table-column
            prop="topSolutionName"
            align="center"
            width="200"
            label="所属产品">
        </el-table-column>
        <el-table-column
            prop="isAPP"
            align="center"
            width="200"
            label="是否APP">
            <template slot-scope="scope">
              <span class="percentFont">{{scope.row.isApp ? '是' : '否'}}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            align="center"
            width="100"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="createUserName"
            align="center"
            width="100"
            label="创建用户">
        </el-table-column>
        <el-table-column
            prop="modifyTime"
            align="center"
            width="100"
            label="修改时间">
        </el-table-column>
        <el-table-column
            prop="modifyUserName"
            align="center"
            width="100"
            label="修改用户">
        </el-table-column>
        <el-table-column
            prop="description"
            align="center"
            width="100"
            label="描述">
        </el-table-column>
        <el-table-column
            align="center"
            width="200"
            label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="slot, total, sizes, prev, pager, next, jumper"
      :total="total">
        <el-button icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getModuleList"></el-button>
    </el-pagination>


    <!-- 添加模块 -->
    <el-dialog :title="dialogTitle"  :visible.sync="addModalVisible" :close-on-click-modal="false" width="60%" @close="handleCancel('form')">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item v-if="dialogTitle === '删除模块'" label="删除提示信息">
          <div style="color: #d93a49;">{{deleteCheckContent}}</div>
        </el-form-item>
         <el-form-item v-if="dialogTitle === '编辑模块'" label="编辑提示信息">
          <div style="color: #d93a49;">{{deleteCheckContent}}</div>
        </el-form-item>
        <el-form-item label="模块编码" prop="moduleCode">
          <el-input v-model="form.moduleCode" placeholder="请输入模块编码" :disabled="dialogTitle === '编辑模块' || deleteDisabled"></el-input>
        </el-form-item>
        <el-form-item label="模块名称" prop="moduleName">
          <el-input v-model="form.moduleName" placeholder="请输入模块名称" :disabled="deleteDisabled"></el-input>
        </el-form-item>
        <el-form-item label="所属项目" prop="solutionName" v-if="componentType === 1">
          <el-input v-model="form.solutionName" placeholder="请输入项目名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属产品" prop="topSolutionName">
          <el-input v-model="form.topSolutionName" placeholder="请输入项目名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否APP" prop="isApp">
        <el-radio-group v-model="form.isApp" :disabled="deleteDisabled">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" :disabled="deleteDisabled"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="dialogTitle === '添加模块'" @click="handleSave('form')">保 存</el-button>
        <el-button type="primary" v-if="dialogTitle === '编辑模块'" @click="__handleEdit('form')">保 存</el-button>
        <el-button type="primary" plain v-if="dialogTitle === '添加模块'" @click="resetForm('form')">清 除</el-button>
        <el-button type="danger" plain v-if="dialogTitle === '删除模块'" @click="__handleDelete('form')">删 除</el-button>
        <el-button @click="handleCancel('form')">取 消</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>

import {request, url} from "@/api/request";
import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
  name: "moudle",
  components: {
    Breadcrumb
  },
  props: {
      componentType: {
          type: Number,
          default: 1,//1组件，2产品
      },
  },
  data() {
    return {
      solution_global: this.$store.state.solution_global,
      headerStyle: {
        "line-height": "40px"
      },
      tableData: [],
      formLabelWidth: "100px",
      addModalVisible: false, //  添加模块
      form: {
        moduleCode: "",
        moduleName: "",
        solutionId: "",
        solutionName: "",
        topSolutionId: "",
        topSolutionName: "",
        isApp: "0",
        description: "",
        moduleId: "",
      },
      rules: {
        moduleCode: [
          { required: true, message: '请输入模块编码', trigger: 'change' },
        ],
        solutionName: [
          { required: true, message: '请输入模块名称', trigger: 'change' },
        ],
      },
      treeData: [{
        label: '模块名称1',
      }, {
        label: '模块名称2',
      }, {
        label: '模块名称3',
      }],
      TreeDefaultProps: {
        label: 'label'
      },
      pageNum: 0,
      pageSize: 10,
      total: 0,
      dialogTitle: '添加模块',
      deleteDisabled: false,
      deleteCheckContent: "",
      
    };
  },

  mounted() {

  },

  created() {
    if (this.$store.state.solution_global) {
      this.getModuleList();
    }
  },

  methods: {
    // 切换 solution 
    changeSolution() {
      this.getModuleList();
    },

    // 查询列表
    getModuleList() {
      if (!this.$store.state.solution_global) {
        return this.$message({
          message: '请先选择解决方案',
          type: 'warning'
        });
      }
      let params = {
        currentPage: this.pageNum,
        rows: this.pageSize,
      }
      let solutionId = this.$store.state.solution_global.solutionId;
      request(`${url.modulesList}/${solutionId}`,{
          method:'GET',
          data: params
      },res=>{
          this.tableData = res.data.list;
          this.pageNum = res.data.pageNum;
          // this.pageSize = res.data.pageSize;
          this.total = res.data.total;
      })
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getModuleList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getModuleList();
    },
    
    showAddModal() {
      console.log(this.$store.state.solution_global);
      if (this.$store.state.solution_global) {
        let solutionId = this.$store.state.solution_global.solutionId;

        // 获取 新增dialog 所属项目 所属产品 默认值
        request(`${url.modulesDefault}/${solutionId}`,{
            method:'GET',
            data: {}
        },res=>{
            this.addModalVisible = true;
            this.deleteDisabled = false;
            this.dialogTitle = '添加模块';
            this.form.solutionId = res.data.solutionId;
            this.form.solutionName = res.data.solutionName;
            this.form.topSolutionId = res.data.topSolutionId;
            this.form.topSolutionName = res.data.topSolutionName;
        })
      } else {
        this.$message({
          message: '请先选择解决方案',
          type: 'warning'
        });
      }

    },

    handleNodeClick() {
      
    },

    // 保存
    handleSave(formName) {
      console.log(this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parmas = {
            moduleCode: this.form.moduleCode,
            moduleName: this.form.moduleName,
            solutionId: this.form.solutionId,
            topSolutionId: this.form.topSolutionId,
            isApp: this.form.isApp,
            description: this.form.description
          };

          request(`${url.modules}`,{
              method:'POST',
              data: parmas
          },res=>{
            console.log(res)
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.addModalVisible = false;
              this.$refs[formName].resetFields();
              this.getModuleList();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleCancel(formName) {
      this.$refs[formName].resetFields();
      this.addModalVisible = false;
    },

    // 编辑
    handleEdit(index, row) {
      console.log(row);
      this.dialogTitle = '编辑模块';
      this.addModalVisible = true;

      this.form.moduleCode = row.moduleCode;
      this.form.moduleName = row.moduleName;
      this.form.solutionId = row.solutionId;
      this.form.solutionName = row.solutionName;
      this.form.topSolutionId = row.topSolutionId;
      this.form.topSolutionName = row.topSolutionName;
      this.form.isApp = String(row.isApp);
      this.form.description = row.description;
      this.form.moduleId = row.moduleId;
      this.editCheck(row.moduleId);

    },

     // edit delete
    editCheck(moduleId) {
      request(`${url.modulesDeleteCheck}/${moduleId}`,{
          method:'GET',
          data: {}
      },res=>{
        this.deleteCheckContent = res.data + res.message;
      })
    },

    __handleEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
          let parmas = {
            moduleCode: this.form.moduleCode,
            moduleName: this.form.moduleName,
            solutionId: this.form.solutionId,
            topSolutionId: this.form.topSolutionId,
            isApp: this.form.isApp,
            description: this.form.description,
            moduleId: this.form.moduleId

          };
          console.log(parmas)
          request(`${url.modules}/${this.form.moduleId}`,{
              method:'PUT',
              data: parmas
          },res=>{
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.addModalVisible = false;
              this.$refs[formName].resetFields();
              this.getModuleList();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 删除
    handleDelete (index, row) {
      console.log(row)
      this.dialogTitle = '删除模块';
      this.deleteDisabled = true;
      this.addModalVisible = true;

      this.form.moduleCode = row.moduleCode;
      this.form.moduleName = row.moduleName;
      this.form.solutionId = row.solutionId;
      this.form.solutionName = row.solutionName;
      this.form.topSolutionId = row.topSolutionId;
      this.form.topSolutionName = row.topSolutionName;
      this.form.isApp = String(row.isApp);
      this.form.description = row.description;
      this.form.moduleId = row.moduleId;
      this.deleteCheck(row.moduleId);
      
    },

    // check delete
    deleteCheck(moduleId) {
      request(`${url.modulesDeleteCheck}/${moduleId}`,{
          method:'GET',
          data: {}
      },res=>{
        this.deleteCheckContent = res.data + res.message;
      })
    },

    //  确认删除 
    __handleDelete (formName) {
      let moduleId = this.form.moduleId;
      request(`${url.modules}/${moduleId}`,{
          method:'DELETE',
          data: {}
      },res=>{
          this.addModalVisible = false;
          this.$refs[formName].resetFields();
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.getModuleList();
      })
    }

  }
};
</script>

<style scoped>
.breadcrumb {
    font-size: 20px;
}

.addPro {
}
</style>
